<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多样式粉丝列表页面</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8fafc;
      color: #334155;
      min-height: 100vh;
      margin: 0;
      transition: all 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 顶部导航 */
    .main-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
      position: sticky;
      top: 0;
      z-index: 100;
      transition: all 0.3s;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
      transition: all 0.3s;
    }
    
    .back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: #64748b;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
      margin-left: auto;
    }
    
    .header-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: #64748b;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 15px;
      position: sticky;
      top: 56px;
      z-index: 90;
      transition: all 0.3s;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background-color: white;
      font-size: 14px;
      transition: all 0.3s;
    }
    
    .search-input:focus {
      outline: none;
      border-color: #0d6efd;
    }
    
    /* 分类标签 */
    .tabs {
      display: flex;
      overflow-x: auto;
      padding: 0 15px;
      gap: 10px;
      position: sticky;
      top: 115px;
      z-index: 80;
      transition: all 0.3s;
    }
    
    .tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .tab-item.active {
      font-weight: 600;
    }
    
    /* 粉丝列表 */
    .fans-list {
      padding: 10px 0 80px 0;
      transition: all 0.3s;
    }
    
    .fan-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      transition: all 0.3s;
      position: relative;
    }
    
    .fan-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15px;
      transition: all 0.3s;
    }
    
    .fan-info {
      flex: 1;
      min-width: 0;
    }
    
    .fan-name {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s;
    }
    
    .fan-desc {
      font-size: 13px;
      color: #94a3b8;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s;
    }
    
    .fan-action {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
      transition: all 0.3s;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      transition: all 0.3s;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
      transition: all 0.3s;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
      transition: all 0.3s;
    }
    
    .empty-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 10px;
      border: 1px solid #e9ecef;
      transition: all 0.3s;
    }
    
    .switch-label {
      font-size: 13px;
      margin-bottom: 8px;
      display: block;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .style-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .style-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .style-btn.active {
      border-color: #0d6efd;
      transform: scale(1.1);
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 10000;
      display: none;
    }
    
    /* 样式1 - 经典列表 */
    .style-1 .main-header {
      background-color: white;
    }
    
    .style-1 .search-bar {
      background-color: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-1 .tabs {
      background-color: #f8fafc;
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-1 .tab-item {
      background-color: white;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }
    
    .style-1 .tab-item.active {
      background-color: #0d6efd;
      color: white;
      border-color: #0d6efd;
    }
    
    .style-1 .fan-item {
      background-color: white;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .style-1 .fan-item:last-child {
      border-bottom: none;
    }
    
    .style-1 .fan-action {
      background-color: #f1f5f9;
      color: #64748b;
    }
    
    .style-1 .fan-action.following {
      background-color: #dbeafe;
      color: #0d6efd;
    }
    
    .style-1 .empty-icon {
      color: #cbd5e1;
    }
    
    .style-1 .empty-btn {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .style-btn:nth-child(1) {
      background-color: #0d6efd;
    }
    
    /* 样式2 - 卡片式 */
    .style-2 {
      background-color: #f5f5f5;
    }
    
    .style-2 .main-header {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border-bottom: none;
    }
    
    .style-2 .search-bar {
      background-color: #f5f5f5;
      padding-top: 15px;
    }
    
    .style-2 .search-input {
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border: none;
    }
    
    .style-2 .tabs {
      background-color: #f5f5f5;
      padding-top: 10px;
      padding-bottom: 15px;
    }
    
    .style-2 .tab-item {
      background-color: white;
      color: #334155;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .style-2 .tab-item.active {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-2 .fans-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 15px;
    }
    
    .style-2 .fan-item {
      background-color: white;
      border-radius: 12px;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 20px 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .style-2 .fan-avatar {
      margin-right: 0;
      margin-bottom: 10px;
      width: 64px;
      height: 64px;
    }
    
    .style-2 .fan-info {
      margin-bottom: 15px;
    }
    
    .style-2 .fan-action {
      width: 100%;
      background-color: #f1f5f9;
      color: #64748b;
    }
    
    .style-2 .fan-action.following {
      background-color: #dbeafe;
      color: #0d6efd;
    }
    
    .style-2 .empty-icon {
      color: #94a3b8;
    }
    
    .style-2 .empty-btn {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-2 .style-btn:nth-child(2) {
      background-color: #e2e8f0;
    }
    
    /* 样式3 - 深色模式 */
    .style-3 {
      background-color: #0f172a;
      color: #f8fafc;
    }
    
    .style-3 .main-header {
      background-color: #1e293b;
      border-bottom-color: #334155;
    }
    
    .style-3 .back-btn,
    .style-3 .header-btn {
      color: #94a3b8;
    }
    
    .style-3 .search-bar {
      background-color: #0f172a;
      border-bottom-color: #334155;
    }
    
    .style-3 .search-input {
      background-color: #1e293b;
      border-color: #334155;
      color: white;
    }
    
    .style-3 .search-input::placeholder {
      color: #94a3b8;
    }
    
    .style-3 .tabs {
      background-color: #0f172a;
      border-bottom-color: #334155;
    }
    
    .style-3 .tab-item {
      background-color: #1e293b;
      color: #94a3b8;
      border-color: #334155;
    }
    
    .style-3 .tab-item.active {
      background-color: #3b82f6;
      color: white;
      border-color: #3b82f6;
    }
    
    .style-3 .fan-item {
      background-color: #1e293b;
      border-bottom-color: #334155;
    }
    
    .style-3 .fan-desc {
      color: #94a3b8;
    }
    
    .style-3 .fan-action {
      background-color: #334155;
      color: #e2e8f0;
    }
    
    .style-3 .fan-action.following {
      background-color: rgba(59, 130, 246, 0.2);
      color: #60a5fa;
    }
    
    .style-3 .empty-icon {
      color: #334155;
    }
    
    .style-3 .empty-subtext {
      color: #64748b;
    }
    
    .style-3 .empty-btn {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-3 .style-switcher {
      background-color: #1e293b;
      border-color: #334155;
    }
    
    .style-3 .switch-label {
      color: #e2e8f0;
    }
    
    .style-3 .style-btn:nth-child(3) {
      background-color: #1e293b;
      border: 1px solid #60a5fa;
    }
    
    /* 样式4 - 强调色风格 */
    .style-4 {
      background-color: #fff7ed;
    }
    
    .style-4 .main-header {
      background-color: #ea580c;
      color: white;
      border-bottom: none;
    }
    
    .style-4 .back-btn,
    .style-4 .header-btn {
      color: white;
    }
    
    .style-4 .search-bar {
      background-color: #fff7ed;
    }
    
    .style-4 .search-input {
      background-color: white;
      border-color: #ffedd5;
    }
    
    .style-4 .tabs {
      background-color: #fff7ed;
    }
    
    .style-4 .tab-item {
      background-color: white;
      color: #9a3412;
      border-color: #ffedd5;
    }
    
    .style-4 .tab-item.active {
      background-color: #ea580c;
      color: white;
      border-color: #ea580c;
    }
    
    .style-4 .fan-item {
      background-color: white;
      margin: 0 15px 10px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(234, 88, 12, 0.05);
    }
    
    .style-4 .fan-name {
      color: #c2410c;
    }
    
    .style-4 .fan-action {
      background-color: #fff7ed;
      color: #ea580c;
      border: 1px solid #ffedd5;
    }
    
    .style-4 .fan-action.following {
      background-color: #ea580c;
      color: white;
      border-color: #ea580c;
    }
    
    .style-4 .empty-icon {
      color: #fdba74;
    }
    
    .style-4 .empty-btn {
      background-color: #ea580c;
      color: white;
    }
    
    .style-4 .style-btn:nth-child(4) {
      background-color: #ea580c;
    }
    
    /* 样式5 - 极简风格 */
    .style-5 {
      background-color: white;
    }
    
    .style-5 .main-header {
      background-color: white;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .style-5 .search-bar {
      background-color: white;
      padding: 10px 15px;
    }
    
    .style-5 .search-input {
      background-color: #fafafa;
      border-color: #f0f0f0;
      border-radius: 4px;
    }
    
    .style-5 .tabs {
      background-color: white;
      padding: 5px 15px;
      top: 107px;
    }
    
    .style-5 .tab-item {
      background-color: transparent;
      color: #666;
      padding: 5px 12px;
      border-radius: 4px;
    }
    
    .style-5 .tab-item.active {
      background-color: #f5f5f5;
      color: #333;
    }
    
    .style-5 .fan-item {
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .style-5 .fan-avatar {
      width: 50px;
      height: 50px;
    }
    
    .style-5 .fan-action {
      background-color: #f5f5f5;
      color: #333;
      border-radius: 4px;
      padding: 5px 12px;
      font-size: 13px;
    }
    
    .style-5 .fan-action.following {
      background-color: #333;
      color: white;
    }
    
    .style-5 .empty-icon {
      color: #e0e0e0;
    }
    
    .style-5 .empty-btn {
      background-color: #333;
      color: white;
      border-radius: 4px;
    }
    
    .style-5 .style-btn:nth-child(5) {
      background-color: #333;
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <span class="switch-label">选择样式</span>
    <div class="style-options">
      <button class="style-btn active" data-style="1" title="经典列表"></button>
      <button class="style-btn" data-style="2" title="卡片式"></button>
      <button class="style-btn" data-style="3" title="深色模式"></button>
      <button class="style-btn" data-style="4" title="强调色风格"></button>
      <button class="style-btn" data-style="5" title="极简风格"></button>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <header class="main-header">
      <button class="back-btn" id="backBtn">
        <i class="fa fa-angle-left"></i>
      </button>
      <div class="header-title">我的粉丝 (1,254)</div>
      <div class="header-actions">
        <button class="header-btn" id="filterBtn">
          <i class="fa fa-filter"></i>
        </button>
      </div>
    </header>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" class="search-input" placeholder="搜索粉丝...">
    </div>
    
    <!-- 分类标签 -->
    <div class="tabs">
      <div class="tab-item active" data-tab="all">全部</div>
      <div class="tab-item" data-tab="recent">最近关注</div>
      <div class="tab-item" data-tab="mutual">互相关注</div>
      <div class="tab-item" data-tab="verified">已认证</div>
      <div class="tab-item" data-tab="online">在线好友</div>
    </div>
    
    <!-- 粉丝列表 -->
    <div class="fans-list" id="fansList">
      <!-- 粉丝项1 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan1/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">李小华</h3>
          <p class="fan-desc">昨天关注 · 来自北京</p>
        </div>
        <button class="fan-action" data-id="1">关注</button>
      </div>
      
      <!-- 粉丝项2 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan2/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">王大明</h3>
          <p class="fan-desc">3天前关注 · 共同好友5人</p>
        </div>
        <button class="fan-action following" data-id="2">已关注</button>
      </div>
      
      <!-- 粉丝项3 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan3/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">张雨晴</h3>
          <p class="fan-desc">1周前关注 · 来自上海</p>
        </div>
        <button class="fan-action" data-id="3">关注</button>
      </div>
      
      <!-- 粉丝项4 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan4/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">赵明宇</h3>
          <p class="fan-desc">2周前关注 · 共同好友2人</p>
        </div>
        <button class="fan-action following" data-id="4">已关注</button>
      </div>
      
      <!-- 粉丝项5 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan5/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">陈思远</h3>
          <p class="fan-desc">1个月前关注 · 来自广州</p>
        </div>
        <button class="fan-action" data-id="5">关注</button>
      </div>
      
      <!-- 粉丝项6 -->
      <div class="fan-item">
        <img src="https://picsum.photos/seed/fan6/200/200" alt="粉丝头像" class="fan-avatar">
        <div class="fan-info">
          <h3 class="fan-name">刘梦琪</h3>
          <p class="fan-desc">2个月前关注 · 共同好友8人</p>
        </div>
        <button class="fan-action following" data-id="6">已关注</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleBtns = document.querySelectorAll('.style-btn');
    const tabItems = document.querySelectorAll('.tab-item');
    const fanActions = document.querySelectorAll('.fan-action');
    const backBtn = document.getElementById('backBtn');
    const filterBtn = document.getElementById('filterBtn');
    const fansList = document.getElementById('fansList');
    const toast = document.getElementById('toast');
    
    // 初始化页面结构（处理不同样式的布局差异）
    function initPageStructure() {
      // 重置列表布局
      fansList.className = 'fans-list';
      
      // 样式2使用网格布局
      if (document.body.classList.contains('style-2')) {
        fansList.classList.add('grid-layout');
      }
    }
    
    // 切换标签
    tabItems.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除其他选中状态
        tabItems.forEach(t => t.classList.remove('active'));
        
        // 设置当前选中
        this.classList.add('active');
        
        // 这里可以添加切换不同粉丝分类的逻辑
        const tabType = this.getAttribute('data-tab');
        showToast(`已切换到${this.textContent}粉丝`);
      });
    });
    
    // 关注/取消关注操作
    fanActions.forEach(btn => {
      btn.addEventListener('click', function() {
        const fanId = this.getAttribute('data-id');
        const fanName = this.closest('.fan-item').querySelector('.fan-name').textContent;
        
        if (this.classList.contains('following')) {
          // 取消关注
          this.classList.remove('following');
          this.textContent = '关注';
          showToast(`已取消关注${fanName}`);
        } else {
          // 关注
          this.classList.add('following');
          this.textContent = '已关注';
          showToast(`已关注${fanName}`);
        }
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 筛选按钮点击事件
    filterBtn.addEventListener('click', function() {
      showToast('打开筛选选项');
    });
    
    // 切换样式
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        document.body.className = '';
        
        // 添加当前样式
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.body.classList.add(`style-${style}`);
        
        // 重新初始化页面结构
        initPageStructure();
        
        showToast(`已切换到${this.title}样式`);
      });
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 初始化
    initPageStructure();
  </script>
</body>
</html>
